<template>
    <div class="container">
      <!-- 设备方案列表 -->
      <div class="header">设备方案列表</div>
  
      <!-- 按钮区域 -->
      <div class="buttons-outer">
        <button @click="handleModify" class="button">修改</button>
        <button @click="handleBatchDelete" class="button">批量删除</button>
        <button @click="handleAdd" class="button">添加</button>
      </div>
  
      <!-- 表格区域 -->
      <table>
        <thead>
          <tr>
            <th>方案名称</th>
            <th>仪器照片</th>
            <th>生产厂家</th>
            <th>详情</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in schemes" :key="index">
            <td>{{ item.name }}</td>
            <td><img :src="item.image" alt="仪器照片"></td>
            <td>{{ item.manufacturer }}</td>
            <td>{{ item.details }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        schemes: [
          { name: '方案A(点击查看)', image: '', manufacturer: '生产厂家', details: '详情' },
          { name: '方案B(点击查看)', image: '', manufacturer: '生产厂家', details: '详情' },
          { name: '方案C(点击查看)', image: '', manufacturer: '生产厂家', details: '详情' }
        ]
      };
    },
    methods: {
      handleModify() {
        // 处理修改操作
      },
      handleBatchDelete() {
        // 处理批量删除操作
      },
      handleAdd() {
        // 处理添加操作
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
    position: relative; /* 为按钮定位提供参照 */
    width: 90%;
    max-width: 1200px;
    margin: auto;
    background-color: #f5f5f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .header {
    padding: 15px 25px;
    background-color: #fff;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #eaeaea;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }
  
  th,
  td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  
  .buttons-outer {
    position: absolute; /* 定位按钮到右上角 */
    top: 0;
    right: 0;
    padding: 15px 25px;
  }
  
  .button {
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px;
  }
  
  .button:hover {
    background-color: #eee;
  }
  </style>
  